<template>
  <div class="container">
    <div class="row card box">
      <div class="header">
          <div class="logo">
            <img class="logo-img" src="~assets/img/timecube-logo.png">
          </div>
          <div class="title">
              <h3>重置密码</h3>
          </div>
      </div>
      <div class="content" v-if="state.step==1">
        <verify-user-name :account="account"></verify-user-name>
      </div>
      <div class="content" v-if="state.step==2&&state.method!='choose'">
        <send :account="account" :state="state"></send>
      </div>
      <div class="content" v-if="state.step==3&&state.method!='choose'">
        <verify  :account="account" :state="state"></verify>
      </div>
      <div class="content" v-if="state.step==4&&state.method!='choose'">
        <reset-pwd :account="account" :state="state"></reset-pwd>
      </div>
      <div class="content" v-if="state.step==5&&state.method!='choose'">
        <complete></complete>
      </div>
      <div class="content" v-if="state.method=='choose'">
        <other-method :account="account" :state="state"></other-method>
      </div>
    </div>
  </div>
</template>

<script>
/**
 * @author guocailee
 */
import { sendSmsForgetPwdCaptcha as sendmobile, sendMailForgetPwdCaptcha as sendemail } from 'src/api/check'
import verifyUserName from './verifyUserName.vue'
import send from './send.vue'
import verify from './verify.vue'
import otherMethod from './otherMethod.vue'
import complete from './complete.vue'
import resetPwd from './resetPwd.vue'
export default {
  data: () => {
    let account = {
      username: null,
      newPassword: null,
      forgetMobileTemp: null,
      forgetEmailTemp: null,
      email: null,
      mobile: null
    }
    let state = {
      method: null,
      resendTime: 0,
      timeoutId: null,
      preMethod: null,
      step: 4
    }
    return { account, state }
  },
  methods: {
    timeStart () {
      var self = this
      self.state.resendTime = 60
      if (self.state.timeoutId) {
        return
      }
      self.state.timeoutId = setInterval(() => {
        self.state.resendTime --
        if (self.state.resendTime <= 0) {
          clearInterval(self.state.timeoutId)
          self.state.timeoutId = null
        }
      }, 1000)
    },
    sendDyCode() {
      this.timeStart()
      if (this.state.method === 'mobile') {
        return sendmobile(this.account.forgetMobileTemp)
      } else if (this.state.method === 'email') {
        return sendemail(this.account.forgetEmailTemp)
      }
    }
  },
  events: {
    tologin() {
      window.location.href = '/signin.html'
    },
    setUserName(username) {
      this.account.username = username
    },
    send() {
      var self = this
      this.sendDyCode().catch(message => self.$notify.error(message))
    },
    setMethod(method) {
     // mobile, email, question, choose
     // save pre method before method change
      this.state.preMethod = this.state.method || method
      this.state.method = method
    },
    setStep(step) {
      this.state.step = step
    },
    setAccount(account) {
      this.account.forgetMobileTemp = account.forgetMobileTemp
      this.account.forgetEmailTemp = account.forgetEmailTemp
      this.account.email = account.email
      this.account.mobile = account.mobile
    }
  },
  components: {
    verifyUserName,
    send,
    verify,
    otherMethod,
    resetPwd,
    complete
  }
}
</script>